@import url('https://fonts.googleapis.com/css?family=Carattere|Cinzel|Afacad|Caveat|Mulish|Lora');
body {background-color: #000; margin: 0px;}
* {box-sizing: border-box;}
a {text-decoration: none;}

/* iframes */
iframe {border: none;}
.topbar {height: 360px; width: 1100px;}
.navbar {width: 100%; font-size: 16px; color: #333; line-height: 25px; height: 770px; /* height: 770px */
 background-image: linear-gradient(to right, rgba(200,235,256,0.8), rgba(200,235,256,0.2));}
.foobar {height: 30px; width: 1100px;}

/* div */
.container {background-color: #eff; width: 1100px; margin: auto;}
header {padding: 54px 100px 20px 100px; margin: auto; background-image: url('background.png'); background-size: 260px; /* background-size: 300px */
 background-repeat: no-repeat; background-position: center 15px; text-align: center;}
.row {display: flex; font-family: 'Mulish', 'Helvetica', sans-serif;}
.side {min-inline-size: 300px;}
nav {color: #333; line-height: 25px; font-family: 'Mulish', 'Helvetica', sans-serif;
 background-image: linear-gradient(to right, rgba(170,215,255,0.7), rgba(170,215,255,0.2)); height: 770px;} /* height: 770px */
.main {padding: 0px 70px 70px 70px; text-align: justify; line-height: 25px;
 color: #333; font-family: 'Mulish', 'Helvetica', sans-serif; font-size: 16px;}
footer {width: 1100px; text-transform: uppercase; font-size: 13px; color: #000; height: 30px; text-align: center; padding: 10px;
 font-family: 'Mulish', 'Helvetica', sans-serif;}
.info {padding: 0px 10px 0px 20px; line-height: 30px; font-size: 15px;}
.navi a {text-transform: uppercase; font-size: 14px; display: block; margin: 0px; padding-left: 10px;}

h1 {font-family: 'Afacad', sans-serif; text-transform: uppercase; font-weight: bold; font-size: 22px;}

/* a */
.info a {font-size: 15px;}
.info a:link, a:visited, a:active {color: #000;}
.info a:hover {opacity: 0.5;}
.navi a:link, a:visited, a:active {color: #000; border: rgba(200,235,256,0) 10px solid;}
.navi a:hover {color: #333; background-color: #fff; opacity: 0.8; border: #fff 10px solid;}
main a {text-decoration: none;}
main a:link, a:visited, a:active {color: #259;}
main a:hover {opacity: 0.7; font-weight: bold;}
.new {font-family: 'Caveat', sans-serif; font-size: 12px; background: #df0; border-radius: 1px 10px; padding: 4px;}
.lnx {line-height: 2.2;}
.lnx td {width: 190px;; vertical-align: top;}
.lnt {line-height: 2.2; width: 100%;}
.lnt td {line-height: 2.2; width: 29%;}

/* p */
.sig {font-family: 'Carattere', serif; text-transform: uppercase; font-size: 18px; margin-bottom: 30px;}
.banner {font-family: 'Carattere', serif; font-weight: bold; font-size: 60px; color: #fff; margin: 15px;
 text-shadow: 5px 5px 10px #000, 0px 0px 2px #000;}
.subtitle {font-family: 'Lora', 'Times New Roman', serif; font-weight: bold; font-size: 23px; color: #fff; margin: 12px;
 text-shadow: 5px 5px 8px #000, 0px 0px 2px #000;}
.verse {font-family: 'Cinzel', serif; font-size: 16px; font-style: italic; color: #333; margin: 54px auto 0px auto; width: 480px;}
.thr {text-transform: uppercase; font-size: 13px;}
.heb {direction: rtl; font-family: serif; font-size: 24px;}

.word {font-style: italic;}
blockquote {text-align: justify; padding-right: 20px; font-family: 'Lora', serif; font-size: 15px;}
.scr {text-align: justify; font-family: 'Lora', serif; font-size: 16px; font-style: italic;}
sup {vertical-align: baseline; position: relative; top: -0.4em; font-size: 12px;}
.fn {font-size: 14px;}
.cite {border: 1px #48a solid; font-size: 13px; padding: 10px; margin-top: 50px; text-align: left;}
.sc {font-variant: small-caps;}

/* input */
textarea {font-family: 'Mulish', sans-serif; font-size: 14px; padding: 4px; width: 600px; height: 100px;
 background-color: #fff; border: 2px solid #aaa;}
textarea:focus {border: 2px solid #000; background-color: #eff;}
input[type=text], input[type=email] {font-family: 'Mulish', sans-serif; font-size: 14px; padding: 4px; background-color: #fff;
 border: 2px solid #bbb;}
input[type=submit] {font-family: 'Mulish', sans-serif; font-size: 16px; font-weight: bold;
 background-color: #555; color: #fff; padding: 4px; width: 100px; border: 2px solid #000; border-radius: 10%;}
input[type=text]:focus, input[type=email]:focus {border: 2px solid #000; background-color: #eee;}

/* img */
.icon {width: 16px; margin: 0px 2px 0px 2px; position: relative; top: 2px;}
.que {border-radius: 50%; padding: 2px 5px; height: 16px; width: 16px; background: #fff; border: 1px solid #8cf; color: #333;
 text-align: center; font: 14px Arial, sans-serif; font-weight: bold;}
.ema {border-radius: 50%; padding: 1px 4px 3px 4px; height: 16px; width: 16px;
 background: #fff; border: 1px solid #8cf; color: #444; position: relative; bottom: 2px;
 text-align: center; font: 13px Cattere, serif; font-weight: bold; font-style: italic;}
.flyf {height: 160px; border: 1px solid #af0;}
.flyh {width: 160px; border: 1px solid #af0; position: relative; bottom: 15px;}

/* indexm */
.navm {color: #333; line-height: 20px; font-family: 'Mulish', 'Helvetica', sans-serif;
 background-image: linear-gradient(to right, rgba(170,215,255,0.7), rgba(170,215,255,0.2)); height: 860px; padding: 15px 0px 0px 15px;}
.navbarm {width: 100%; font-size: 16px; color: #333; line-height: 20px; height: 880px;
 background-image: linear-gradient(to right, rgba(200,235,256,0.8), rgba(200,235,256,0.2));}
.navim a {text-transform: uppercase; font-size: 14px; display: block; margin: 0px; padding: 0px 10px 0px 15px;}
.navim a:link, a:visited, a:active {color: #000; border: rgba(200,235,256,0) 10px solid;}
.navim a:hover {color: #333; background-color: #fff; opacity: 0.8; border: #fff 10px solid;}
.infom {padding: 0px 10px 0px 0px; line-height: 30px; font-size: 15px;}
.infom a {font-size: 15px;}
.infom a:link, a:visited, a:active {color: #000;}
.infom a:hover {opacity: 0.5;}

/* sur */
.ind {margin-left: 10px; text-align: left;}
.inds {padding-left: 20px; text-align: left; display: inline-block;}
.inds a:link, a:visited, a:active {color: #051;}
.inds a:hover {opacity: 0.5;}
.collapsible {background-color: #eff; color: #037; cursor: pointer; padding: 14px; width: 100%; border: none; text-align: left; outline: none; font-size: 16px; font-family: 'Mulish', 'Helvetica', sans-serif;}
.active, .collapsible:hover {background-color: #cf0;}
.collapsible:after {content: '\002B'; color: #037; font-weight: bold; float: right; margin-left: 5px;}
.active:after {content: "\2212";}
.content {padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #fff; font-size: 15px; line-height: 25px;}

/* hym */
table.hymtab td:nth-child(1), th:nth-child(1) {width: 50px; font-weight: bold; text-align: right; padding-right: 10px;}
table.hymtab td:nth-child(2), th:nth-child(2) {width: 600px; text-align: left;}
div.sticky {position: fixed; bottom: 5px; right: 400px; padding: 50px; font-size: 20px;}
.topa {font-family: 'Times New Roman', serif; color: #a00; font-weight: bold; opacity: 0.7;}
.topa:hover {opacity: 1;}
.topa:active {opacity: 1; color: #a00;}
.mem {font-family: 'Segoe UI', sans-serif;}

/* mobile */
@media only screen and (max-width: 768px) {
 body {background: #def;}
 .container {width: 100vw;}
 .navbar {width: 100vw;}
 .topbar {width: 100vw; height: 415px;}
 .foobar {width: 100vw; height: 30px;}
 .row {width: 100vw; display: block;}
 .side {width: 100vw; display: block;}
 .main {width: 100vw; display: block; padding: 15px 30px 100px 30px;}
 header {width: auto; background-image: url('background.png'); background-repeat: no-repeat; text-align: center;
  background-position: center 0px; background-size: 300px; height: 415px; padding: 30px 0px 0px 0px; margin: 0px;}
 .banner {font-size: 30px; width: 100%; margin: 35px 0px 0px 0px; white-space: nowrap;}
 .subtitle {font-size: 20px; width: 100%; margin: 35px 0px 0px 0px;}
 .verse {font-size: 16px; width: 100%; margin: 98px 0px 0px 0px;}
 footer {width: 100vw; font-size: 13px; height: 30px; padding: 5px;}
}